<script type="text/javascript">
function doc_dialog_onLoad($dialog) {
    $dialog.alertmsg('info', 'onLoad回调：不填写工号是不能关闭本弹窗的。')
}
function doc_dialog_beforeClose($dialog) {
    var code = $dialog.find('#doc-dialog-code').val()
    
    if (code) return true
    $dialog.alertmsg('error', 'beforeClose回调：关闭弹窗前请先填入你的工号。')
    return false
}
function doc_dialog_onClose() {
    $(this).alertmsg('info', 'onClose回调：你刚刚关闭了一个dialog。')
}
</script>
<div class="bjui-pageContent">
    <div class="bjui-doc">
        <h3 class="page-header">创建dialog</h3>
        <blockquote>
            <p>创建一个dialog有以下两种方式：</p>
        </blockquote>
        
        <ul>
            <li>Data属性：DOM添加属性<code>data-toggle="dialog"</code>后，单击触发。<br>
                <span class="label label-default">DOM示例1：</span>　<a href="doc/dialog/mydialog.html" data-toggle="dialog" data-id="mydialog1" data-title="我的业务弹窗1">打开dialog</a><br>
                <pre class="brush: html">
                    <a href="mydialog.html" data-toggle="dialog" data-id="mydialog1" data-title="我的业务弹窗1">打开dialog</a>
                </pre>
                <span class="label label-default">DOM示例2：</span>　<button type="button" class="btn-green" data-toggle="dialog" data-id="mydialog2" data-url="doc/dialog/mydialog.html" data-title="我的业务弹窗2">打开dialog</button>
                <pre class="brush: html">
                    <button type="button" class="btn-green" data-toggle="dialog" data-id="mydialog2" data-url="mydialog.html" data-title="我的业务弹窗2">打开dialog</button>
                </pre>
                <span class="label label-default">DOM示例3(参数集合)：</span>　<button type="button" class="btn-green" data-toggle="dialog" data-options="{id:'mydialog2', url:'doc/dialog/mydialog.html', title:'我的业务弹窗2(参数集合)'}">打开dialog(参数集合)</button>
                <pre class="brush: html">
                    <button type="button" class="btn-green" data-toggle="dialog" data-options="{id:'mydialog2', url:'doc/dialog/mydialog.html', title:'我的业务弹窗2(参数集合)'}">打开dialog(参数集合)</button>
                </pre>
                <span class="label label-default">其他示例[加载容器中的内容]：</span>　<button type="button" class="btn-green" data-toggle="dialog" data-id="mydialog3" data-target="#doc-dialog-target" data-title="加载容器中的内容">打开dialog</button>
                <div id="doc-dialog-target" data-noinit="true" class="hide">
                    <p><input type="checkbox" id="doc-dialog-checkbox" data-toggle="icheck" data-label="测试Checkbox"></p>
                    <p><label>文本框：</label><input type="text" placeholder="文本框1" size="25"></p>
                    <p><label>下拉框：</label><select data-toggle="selectpicker"><option value="1">选项一</option><option value="2">选项二</option></select></p>
                </div>
                <p>
                    <pre class="brush: html">
                        &lt;button type="button" class="btn-green" data-toggle="dialog" data-id="mydialog3" data-target="#doc-dialog-target" data-title="加载容器中的内容">打开dialog&lt;/button>&lt;/p>
                        &lt;div id="doc-dialog-target" data-noinit="true" class="hide">
                            &lt;p>&lt;input type="checkbox" id="doc-dialog-checkbox" data-toggle="icheck" data-label="测试Checkbox">&lt;/p>
                            &lt;p>&lt;label>文本框：&lt;/label>&lt;input type="text" placeholder="文本框1" size="25">&lt;/p>
                            &lt;p>&lt;label>下拉框：&lt;/label>&lt;select data-toggle="selectpicker">&lt;option value="1">选项一&lt;/option>&lt;option value="2">选项二&lt;/option>&lt;/select>&lt;/p>
                        &lt;/div>
                    </pre>
                </p>
                <span class="label label-default">其他示例[回调函数]：</span>　<button type="button" class="btn-green" data-toggle="dialog" data-id="mydialog4" data-target="#doc-dialog-target-callback" data-title="回调函数示例" data-on-load="doc_dialog_onLoad" data-before-close="doc_dialog_beforeClose" data-on-close="doc_dialog_onClose">打开dialog</button>
                <div id="doc-dialog-target-callback" data-noinit="true" class="hide">
                    <div class="text-center">
                        <h3>dialog回调函数示例</h3>
                        <hr>
                        <p><label>工号：</label><input type="text" name="code" id="doc-dialog-code"></p>
                    </div>
                </div>
                <p>
                    <pre class="brush: js; html-script: true">
                        &lt;script type="text/javascript">
                            function doc_dialog_onLoad($dialog) {
                                $dialog.alertmsg('info', 'onLoad回调：不填写工号是不能关闭本弹窗的。')
                            }
                            function doc_dialog_beforeClose($dialog) {
                                var code = $dialog.find('#doc-dialog-code').val()
                                
                                if (code) return true
                                $dialog.alertmsg('error', 'beforeClose回调：关闭弹窗前请先填入你的工号。')
                                return false
                            }
                            function doc_dialog_onClose() {
                                $(this).alertmsg('info', 'onClose回调：你刚刚关闭了一个dialog。')
                            }
                        &lt;/script>
                        &lt;button type="button" class="btn-green" data-toggle="dialog" data-id="mydialog4" data-target="#doc-dialog-target-callback" data-title="回调函数示例" data-on-load="doc_dialog_onLoad" data-before-close="doc_dialog_beforeClose" data-on-close="doc_dialog_onClose">打开dialog&lt;/button>
                        &lt;div id="doc-dialog-target-callback" data-noinit="true" class="hide">
                            &lt;div class="text-center">
                                &lt;h3>dialog回调函数示例&lt;/h3>
                                &lt;hr>
                                &lt;p>&lt;label>工号：&lt;/label>&lt;input type="text" name="code" id="doc-dialog-code">&lt;/p>
                            &lt;/div>
                        &lt;/div>
                    </pre>
                </p>
            </li>
            <li>jQuery API：<br>
                <script type="text/javascript">
                    function openMydialog(obj) {
                        $(obj).dialog({id:'mydialog', url:'doc/dialog/mydialog.html', title:'我的业务弹窗-jQuery API'});
                    }
                </script>
                <span class="label label-default">jQuery示例：</span>　<button type="button" class="btn-default" onclick="openMydialog(this)">打开dialog</button>
                <p>本例完整代码：</p>
                <pre class="brush: js; html-script: true">
                    &lt;script type="text/javascript">
                    function openMydialog(obj) {
                        $(obj).dialog({id:'mydialog', url:'doc/dialog/mydialog.html', title:'我的业务弹窗'});
                    }
                    &lt;/script>
                    <button type="button" class="btn-default" onclick="openMydialog(this)">打开dialog</button>
                </pre>
                <p>jQuery方法代码：</p>
                <pre class="brush: js">
                    $(selector).dialog(options)
                </pre>
            </li>
        </ul>
        <blockquote class="point">
            <p>取得当前dialog的容器：<code>$.CurrentDialog</code></p>
        </blockquote>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>